<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>14.vue中的数组的代理</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{uname}}</h1>
            <button @click="changeUname">修改姓名</button>
            <hr>

            <h1>{{news.title}}</h1>
            <h1>{{news.content}}</h1>

            <button  @click="changeTitle">更新标题</button>
            <button @click="changeContent">更新内容</button>

            <hr>
            <h1>{{arr}}</h1>
            <button @click="changeArr">修改数组中的第一名字</button>
            <button @click="updataArr">更新数组</button>

        </div>
    </body>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                uname:"倩倩",
                arr:["张杰","罗翔","张三"],
                news:{
                    title:"听说五月天要开演唱会了",
                    content:"xxxxxxxxxxxxxxxxxxxxxxxxxx",
                    a:{
                        b:{
                            c:{
                                d:{
                                    e:1
                                }
                            }
                        }
                    }
                },
            },
            methods:{
                changeUname(){
                    this.uname = "秘书";
                },
                changeTitle(){
                    this.news.title = "随便写";
                },
                changeContent(){
                    this.news.content = "!!!!!!!!!!!!!!!!!!!!!!!!!11";
                },
                changeArr(){
                    this.arr.splice(0,1,"王宁秘书");
                
                    // console.log(this.arr.push  === Array.prototype.push) 
                },
                updataArr(){
                    this.arr = ["aaa","bbb","cccc"];
                }
            }
        })

        console.log(vm)





    </script>
</html>